


How to Make Facebook Messenger Chat on AO3

by ran_a_dom (revabhipraya)



Series: AO3 Chat Skin Tutorial [3]
Category: No Fandom
Genre: Chatting & Messaging, Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2019-06-17
Updated: 2019-06-17
Packaged: 2020-05-13 10:59:42
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 975
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/19249828
Author URL: https://archiveofourown.org/users/revabhipraya/pseuds/ran_a_dom
Summary: A tutorial and live example to make Facebook Messenger Chat using AO3 skin.





	How to Make Facebook Messenger Chat on AO3

 

 

 

This is header  
  
This is first person's text  
This is second person's name  
This is second person's text  
MON 11.37  
This is first person's text1  
This is first person's text2  
This is first person's text3  
This is second person's name  
This is second person's text1  
This is second person's text2  
This is second person's text2  
This is second person's text3

* * *

# how to code it?

I think I've made too many chat skin tutorial, but I cannot hold myself to make more >< this time, I'' show you how to make Facebook Messenger skin using AO3; just like the above!

First, go to your dashboard and click "Skins". Choose "My Work Skin", then "Create Work Skin". But you may add this code to other skin that you have, of course!

If you make a new work skin, then write anything you want in the "Title" box, and start your "CSS" box with the base of the phone:
    
    
    #workskin .phone {
      max-width: 300px;
      font-family: "Segoe UI";
      display: table;
      margin: auto;
    }

Next, you'll have to make the base of the message body:
    
    
    #workskin .messagebody {
      background-color: #FFFFFF;
      display: table;
      padding-left: .5em;
      padding-right: .5em;
    }

Next, we're going to add contact name:
    
    
    #workskin .header {
      min-width: 300px;
      background-color: #ffffff;
      border-bottom: 1px solid #eaeaea;
      color: #000000;
      font-weight: bold;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -2em;
      text-align: center;
      text-transform: capitalize;
      display: table;
    }
    

Since the text transform is set to  **capitalize** , then the contact name's first letter will be capitalized. You can erase this option if you want to.

Next, we'll add the bubble chat! First, we'll add the bubble chat for the first person point of view:
    
    
    #workskin .reply {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      padding: 0.5em 1em;
      background: #0099ff;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .reply1 {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.15em;
      border-radius: 1.5em;
      border-bottom-right-radius: 0.25em;
      padding: 0.5em 1em;
      background: #0099ff;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .reply2 {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.15em;
      border-radius: 1.5em;
      border-top-right-radius: 0.25em;
      border-bottom-right-radius: 0.25em;
      padding: 0.5em 1em;
      background: #0099ff;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .reply3 {
      float: right;
      color: #FFFFFF;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      border-top-right-radius: 0.25em;
      padding: 0.5em 1em;
      background: #0099ff;
      max-width: 75%;
      clear: both;
      position: relative;
    }

There are 4 types of bubble chat since Facebook Messenger's bubble chats change based on how many bubble a person sends. If you send one bubble, it will be the reply class. If you send two bubbles, it will be the reply1 and reply3 class. If you send three or more bubbles, it will be the reply1, reply2, and reply3 class with the number of reply2 class will be depended on the number of bubble chat you send excluding the first and last bubble.

Bonus: you can change the first person's text color as you like! Facebook Messenger has some colors and I will provide the code here. What you need to do is change the code in "background" with one of these codes. Unfortunately, you can only use one of these for one skin:
    
    
    Blue (base color): #0099ff
    Pale Blue: #44bec7
    Yellow: #ffc300
    Red: #ff3c4c
    Lavender: #d696bb
    Green: #13cf13
    Orange: #ff7e29
    Light Red: #e68585
    Purple: #7646ff
    Light Blue: #20cef5
    Pink: #ff5ca1

Then, we'll add the bubble chat for the second person point of view:
    
    
    #workskin .text {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      padding: 0.5em 1em;
      background: #f1f0f0;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text1 {
      float: left;
      color: #000000;
      margin: 0 0 0.15em;
      border-radius: 1.5em;
      border-bottom-left-radius: 0.25em;
      padding: 0.5em 1em;
      background: #f1f0f0;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text2 {
      float: left;
      color: #000000;
      margin: 0 0 0.15em;
      border-radius: 1.5em;
      border-top-left-radius: 0.25em;
      border-bottom-left-radius: 0.25em;
      padding: 0.5em 1em;
      background: #f1f0f0;
      max-width: 75%;
      clear: both;
      position: relative;
    }
    
    #workskin .text3 {
      float: left;
      color: #000000;
      margin: 0 0 0.5em;
      border-radius: 1.5em;
      border-top-left-radius: 0.25em;
      padding: 0.5em 1em;
      background: #f1f0f0;
      max-width: 75%;
      clear: both;
      position: relative;
    }

Same with reply class, the text class also has 4 types.

Next, add these lines for timestamps:
    
    
    #workskin .time {
      min-width: 295px;
      color: #999999;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: .5em;
      margin-left: -.5em;
      margin-right: -.5em;
      margin-bottom: -.5em;
      text-align: center;
      display: table;
    }

And, for person's name in group:
    
    
    #workskin .grouptext {
      color: #999999;
      font-size: .75em;
      padding-bottom: .5em;
      padding-top: 0;
      margin-left: .75em;
      margin-bottom: -2.5em;
      text-align: left;
      display: table;
      clear: both;
    }

You're done with the CSS! Next, go to your "Work Text" and write in the "HTML" instead of "Rich Text". For the example above, just type it like this:
    
    
    <div class="phone">
    <p class="messagebody">
    <span class="header">This is header</span><br /><br />
    <span class="reply">This is first person's text</span><br />
    <span class="grouptext">This is second person's name</span><br />
    <span class="text">This is second person's text</span><br />
    <span class="time">MON 11.37</span><br />
    <span class="reply1">This is first person's text1</span><br />
    <span class="reply2">This is first person's text2</span><br />
    <span class="reply3">This is first person's text3</span><br />
    <span class="grouptext">This is second person's name</span><br />
    <span class="text1">This is second person's text1</span><br />
    <span class="text2">This is second person's text2</span><br />
    <span class="text2">This is second person's text2</span><br />
    <span class="text3">This is second person's text3</span>
    </p>
    </div>

You're done! You'll get this as the result:

 

 

 

This is header  
  
This is first person's text  
This is second person's name  
This is second person's text  
MON 11.37  
This is first person's text1  
This is first person's text2  
This is first person's text3  
This is second person's name  
This is second person's text1  
This is second person's text2  
This is second person's text2  
This is second person's text3

**Works inspired by this one:**

  * [iMessage Skin](https://archiveofourown.org/works/22703617) by [Azdaema](https://archiveofourown.org/users/Azdaema/pseuds/Azdaema)




End file.
